/**
 * desc: 开通自动支付
 */

import React, { useEffect, useState } from 'react';
import CommonModal from '@/components/CommonModal';
import CommonLoading from '@/components/CommonLoading';
import { Form, Input, message, Button } from 'antd';
import { layout2 } from '@/utils/config';
import { openAutoPay } from '../../service';

const OpenPayModal = ({
  visible,
  handleOk,
  orderId,
  handleCancel,
  rewriteNoteData,
}) => {
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();

  useEffect(() => {
    if (visible) {
      form.resetFields();
    }
  }, [visible]);

  const onOk = () => {
    form.validateFields().then((val) => {
      handleSubmit(val);
    });
  };

  const handleSubmit = async (val) => {
    setLoading(true);
    const params = {
      ...val,
    };
    const res = await openAutoPay(params);
    if (res.success) {
      handleOk();
      message.success('开启成功!');
    }
    setLoading(false);
  };

  const onCancel = () => {
    form.resetFields();
    handleCancel();
  };

  return (
    <CommonModal
      title="自动支付开通认证"
      visible={visible}
      onCancel={onCancel}
      width={458}
      onOk={onOk}
      minHeight="120px"
      footer={[
        <Button key="back" onClick={onCancel}>
          取消
        </Button>,
        <Button key="save" type="primary" onClick={onOk}>
          认证并开通
        </Button>,
      ]}
    >
      <Form
        form={form}
        name="order-print-setnotes"
        {...layout2}
        initialValues={{}}
        style={{ marginRight: '16px' }}
      >
        <Form.Item
          label="支付密码"
          name="password"
          style={{ marginBottom: '0px' }}
          rules={[{ required: true, message: '请输入支付密码' }]}
        >
          <Input.Password placeholder="请输入支付密码" />
        </Form.Item>
      </Form>
      <CommonLoading loading={loading} />
    </CommonModal>
  );
};

export default OpenPayModal;
